<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view class="content">
<!--		<u-navbar title-color="#020202" :background="{background:'#f8f8f8'}" title="分享">-->
<!--		</u-navbar>-->
		<view class="top"></view>

		<view class="banner">
			<dl>
				<dt>
					<image src="../../static/images/my/share/logo.png" style="margin-top: -80upx;"></image>
				</dt>
				<dd>代理平台</dd>
			</dl>

			<view class="img">
				<image :src="qrCodeImage"></image>
			</view>
			<view class="tgtit">推广链接：
				<text class="tugurl">{{inviteUrl}}</text>
			</view>
			<view class="sharbuttn">
				<!-- <view class="btn" @click="save">保存二维码</view> -->
				<view class="btn" @click="sharurl">复制推广链接</view>
			</view>

			<view class="shartitle">
				<view>分享</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Qrcode from 'qrious';
	export default {
		data() {
			return {
				inviteUrl: '',
				qrCodeImage: ''
			}
		},
		onShow() {
			if (!this.$store.state.user.userInfo
			|| !this.$store.state.user.userInfo.inviteCode) {
				this.$store.dispatch('getUserInfo')
					.then(res => {
						console.log("测试", res)
						this.init()
					});
			} else {
				console.log("测试1", this.$store.state.user.userInfo)
				this.init()
			}

		},
		methods: {
			init() {
				this.inviteUrl = 'https://' + window.location.host + "/#/pages/login/login?inviteCode=" + this.$store.state
					.user.userInfo.inviteCode
				let qr = new Qrcode({
					value: this.inviteUrl
				});
				this.qrCodeImage = qr.toDataURL()
			},

			//复制分享链接
			sharurl() {
				uni.setClipboardData({
					data: this.inviteUrl
				});
			},
			//保存图片到相册
			save() {
				uni.showActionSheet({
					itemList: ['保存图片到相册'],
					success: () => {
						plus.gallery.save('http://pds.jyt123.com/wxtest/logo.png', function() {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							})
						}, function() {
							uni.showToast({
								title: '保存失败，请重试！',
								icon: 'none'
							})
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tugurl {
		color: #999;
	}

	.sharbuttn {
		display: flex;
		justify-content: center;
	}

	.shartitle {
		width: 80%;
		text-align: center;
		margin-left: 10%;
		border-bottom: 1px solid #dddddd;
		position: relative;
		height: 60upx;
	}

	.tgtit {
		text-align: center;
	}

	.shartitle view {
		height: 50upx;
		line-height: 50upx;
		font-size: 28upx;
		color: #999;
		width: 120upx;
		margin: 32upx auto;
		position: absolute;
		background: #fff;
		left: 50%;
		margin-left: -60upx;
	}

	.top {
		width: 100%;
		height: 400upx;
		background: url(../../static/images//my/share/banner.png) no-repeat;
		background-size: 100%;
		background-position: center center;
	}

	.banner {
		padding: 0 50upx 0;
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 80upx 80upx 0 0;
		box-shadow: 0 2upx 20upx rgba(183, 183, 183, 0.3); //周边阴影
		margin-top: -60upx;
	}

	.banner dl {
		margin-top: -80upx;
	}

	.banner dl dt {
		text-align: center;
	}

	.banner dl dt image {
		width: 160upx;
		height: 160upx;
		border-radius: 50%;
	}

	.banner dl dd {
		text-align: center;
	}

	.img {
		width: 300upx;
		height: 300upx;
		background-color: red;
		margin: 0 auto;
		margin-top: 60upx;
	}

	.img image {
		width: 100%;
		height: 100%;
	}

	.btn {
		width: 260upx;
		height: 60upx;
		line-height: 60upx;
		margin: 0 auto;
		margin-top: 60upx;
		border-radius: 40upx;
		border: 0;
		font-size: 26upx;
		outline: 0;
		background: #33b17b;
		color: #FFFFFF;
		text-align: center;
	}

	.panel {
		padding: 0 30upx 0;

		.panel-content {
			background: white;
			margin: 0 auto;
			border-radius: 16upx; //面包圆形倒角
			box-shadow: 0 2upx 20upx rgba(183, 183, 183, 0.3); //周边阴影
			margin-top: 16upx; //顶部间隔
		}
	}
</style>
